<template>
  <div style="margin: 0 10px 0 0 ">
    <div style="width: 100%;height: 40px;">
      <div style="float:right;margin:5px">
        <el-button type="primary" size="mini" @click="submitForm" v-if="canSave">保 存</el-button>
        <el-button type="primary" @click="refresh" size="mini">刷新</el-button>
      </div>
    </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="main-form">
      <el-row :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <!--1-->
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="功能类型">
            <el-select v-model="form.ctFunType" placeholder="请选择功能类型" style="width:100%;">
              <el-option label="主类目" value="0" />
              <el-option label="功能" value="1" />
              <el-option label="子功能" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
      <!--  <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="类目名称" prop="ctFunP">
            <mis-select-tree
              :mis-tree-type="901"
              :select-multiple="false"
              :disable-branch-nodes="false"
              @updateSelectTreeVal="updateSelectTreeValctFunP"
              :setValue="form.ctFunP"
            ></mis-select-tree>
          </el-form-item>
        </el-col>
-->
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="功能编号" prop="ctFunNo">
            <el-input v-model="form.ctFunNo" placeholder="请输入功能编号，唯一4位" title="功能唯一编号，4位" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="功能名称" prop="ctFunName">
            <el-input v-model="form.ctFunName" placeholder="请输入功能名称" />
          </el-form-item>
        </el-col>
        <!--2-->
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="存储位置">
            <el-input
              v-model="form.ctTable"
              placeholder="请输入对应表"
              title="对应数据库Table名称"
              required="required"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="业务视图">
            <el-input
              v-model="form.ctView"
              placeholder="请输入对应视图"
              title="对应数据库View名称，查询优先会选择View，其次为Table"
            />
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="单据类型">
            <el-input v-model="form.ctBussType" placeholder="请输入对应单据类型" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="页面路由">
            <el-input v-model="form.ctUrl" placeholder="请输入详情页面路由地址" />
          </el-form-item>
        </el-col>
        <!--3-->
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="排序字段">
            <el-input v-model="form.ctOrderby" placeholder="请输入排序字段,默认ct_id desc" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="唯一主键">
            <el-input v-model="form.ctTableMainid" placeholder="请输入主键id，默认CT_ID" />
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="数据子表">
            <el-input v-model="form.ctTableChild" placeholder="请输入从单对应的表，逗号分隔" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="显示条数">
            <el-select v-model="form.amRow" placeholder="显示条数">
              <el-option
                v-for="item in rowOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- <el-form-item label="显示条数">
            <el-input v-model="form.amRow" placeholder="请输入每页显示条数" />
          </el-form-item>-->
        </el-col>
        <!--4-->
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="组织过滤" prop="ctFilterOrg">
            <el-select v-model="form.ctFilterOrg" placeholder="请选择组织过滤过滤" style="width:100%;">
              <el-option label="过滤" value="1" />
              <el-option label="不过滤" value="0" />
            </el-select>
          </el-form-item>
        </el-col>

        <!--                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">-->
        <!--                  <el-form-item label="是否签发" prop="ctIfSign">-->
        <!--                    <el-input v-model="form.ctIfSign" placeholder="请输入是否签发"/>-->
        <!--                  </el-form-item>-->
        <!--                </el-col>-->
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="业务过滤">
            <el-select v-model="form.ctFilterBusstype" placeholder="请选择业务类型过滤" style="width:100%;">
              <el-option label="过滤" value="1" />
              <el-option label="不过滤" value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="人员过滤">
            <el-select v-model="form.ctFilterUser" placeholder="请输入打开模式" style="width:100%;">
              <el-option label="过滤" value="1" />
              <el-option label="不过滤" value="0" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="流程过滤">
            <el-select v-model="form.ctFilterStep" placeholder="请输入流程步骤过滤" style="width:100%;">
              <el-option label="过滤" value="1" />
              <el-option label="不过滤" value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="其他过滤">
            <el-input v-model="form.ctFilterOther" placeholder="请输入其他过滤条件,直接sql语句" />
          </el-form-item>
        </el-col>

        <!--5-->
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="是否流程" prop="ctIfStep">
            <el-select v-model="form.ctIfStep" placeholder="请输入是否流程" style="width:100%;">
              <el-option label="准框架执行" value="1" />
              <el-option label="非标准框架" value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="流程编码">
            <el-input v-model="form.ctFlowNo" placeholder="请输入流程编码，默认00" />
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="单据校验">
            <el-select
              v-model="form.ctIfCheckUser"
              placeholder="校验是否一致"
              style="width:100%;"
              title="校验当前登录人与单据填写人是否一致"
            >
              <el-option label="校验" value="1" />
              <el-option label="不校验" value="0" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="上传附件">
            <el-select
              v-model="form.ctIfFile"
              placeholder="是否允许上传附件"
              style="width:100%;"
              title="是否允许上传附件"
            >
              <el-option label="允许" value="1" />
              <el-option label="不允许" value="0" />
            </el-select>
          </el-form-item>
        </el-col>

        <!--6-->
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="是否检阅" prop="ctIfReview">
            <el-select
              v-model="form.ctIfReview"
              placeholder="请输入是否检阅"
              style="width:100%;"
              title="请输入是否检阅"
            >
              <el-option label="允许" value="1" />
              <el-option label="不允许" value="0" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="是否链接" prop="ctIfSubmit">
            <!--            <el-input v-model="form.ctIfSubmit" placeholder="请输入是否出现链接"/>-->
            <el-select
              v-model="form.ctIfSubmit"
              placeholder="请输入是否出现链接"
              style="width:100%;"
              title="请输入是否出现链接"
            >
              <el-option label="允许" value="1" />
              <el-option label="不允许" value="0" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="ISO编号">
            <el-input v-model="form.ctCodeIso" placeholder="请输入质量标准体系编号" />
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="打开模式">
            <el-select v-model="form.ctWinModel" placeholder="请输入打开模式" style="width:100%;">
              <el-option label="弹窗" value="1" />
              <el-option label="新页面" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <!--7-->
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="窗口宽度">
            <el-input v-model="form.ctWinWidth" placeholder="请输入打开窗口的宽度" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="列表对应功能号">
            <el-input v-model="form.ctListFunNo" placeholder="请输入列表对应功能号" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="窗体图标" prop="ctWinIcon">
            <el-popover
              placement="bottom-start"
              width="460"
              trigger="click"
              @show="$refs['iconSelect'].reset()"
            >
              <IconSelect ref="iconSelect" @selected="selected" />
              <el-input slot="reference" v-model="form.ctWinIcon" placeholder="点击选择图标" readonly>
                <svg-icon
                  v-if="form.ctWinIcon"
                  slot="prefix"
                  :icon-class="form.ctWinIcon"
                  class="el-input__icon"
                  style="height: 32px;width: 16px;"
                />
                <i v-else slot="prefix" class="el-icon-search el-input__icon" />
              </el-input>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="功能有效性" prop="ctState">
            <el-select v-model="form.ctState" placeholder="请输入有效标志，9标识删除" style="width:100%;">
              <el-option label="有效" value="1" />
              <el-option label="无效" value="9" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="会议显示类型" prop="amMeetingDisplayType">
            <el-select v-model="form.amMeetingDisplayType" style="width:100%;">
              <el-option label="多行" :value="true" />
              <el-option label="单行" :value="false" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="人员显示类型" prop="ctSelectUser">
            <el-select v-model="form.ctSelectUser" style="width:100%;">
              <el-option label="必选" value="00" />
              <el-option label="可选多行" value="11" />
              <el-option label="可选单行" value="12" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
          <el-form-item label="批量审批路由">
            <el-input v-model="form.ctApproveUrl" placeholder="请输入批量审批路由" />
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <div style="width: 100%;height: 40px;">
      <div style="float:right;margin:5px">
        <el-button type="primary" size="mini" @click="submitForm" v-if="canSave">保 存</el-button>
        <el-button type="primary" @click="refresh" size="mini">刷新</el-button>
      </div>
    </div>

    <add-files ref="addFileDig" :setCtIdP="ctIdP" @refreshFileList="refreshFileList"></add-files>
  </div>
</template>

<script>
import { getFunction, addFunction, updateFunction } from '@/api/mis/function'
import {
  delFileblob,
  listFileblob,
  getFileblobToken,
  downloadFile,
} from '@/api/fileList/fileList'
import MisSelectTree from '@/components/SpsPublic/treeview/MisSelectTree'
import IconSelect from '@/components/IconSelect'
import store from '@/store/index'
import { getFunNo } from '@/utils/party'
import AddFiles from '@/components/SpsPublic/FileList/AddFiles'

export default {
  name: 'Function',
  components: {
    MisSelectTree,
    IconSelect,
    AddFiles,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      store: store,
      // 总条数
      total: 0,
      // 功能列表格数据
      functionList: [],
      ctIdP: this.bussId,
      // 表单参数
      form: {},
      vifF: true,
      // 表单校验
      rules: {
        ctTable: [
          { required: true, message: '数据库表不能为空', trigger: 'blur' },
        ],
      },
      // 可否保存和表单控件disable标识
      canSave: false,
      funNo: getFunNo(this.$route),
      singleStore: null,
      subSingleStore: null,
      // 列表显示页数
      rowOptions: [
        { label: '10条/页', value: 10 },
        { label: '20条/页', value: 20 },
        { label: '30条/页', value: 30 },
        { label: '50条/页', value: 50 },
      ],
    }
  },
  mounted() {
    this.singleStore = store.getters.singleStore['main' + this.funNo]
    this.subSingleStore = this.singleStore.subSingleStore['sub' + this.subFunNo]
    this.getRecord()
  },
  watch: {
    form: {
      handler(newval) {
        if (this.subSingleStore) {
          store.dispatch('updateSingleStore', newval)
        }
      },
      deep: true,
    },
  },
  methods: {
    // 选择图标
    selected(name) {
      this.form.ctWinIcon = name
    },
    refresh() {
      this.masterRefresh()
    },
    upload() {
      this.$refs['addFileDig'].handleOpenDialog()
    },
    refreshFileList() {
      // this.getRecord()
      this.getFileList()
      this.$emit('refresh')
    },
    getFileList() {
      this.fileQueryParams.ctTypeList = ['01', '02']
      // this.fileQueryParams.ctIdP = this.bussId
      this.fileQueryParams.ctIdP = this.ctIdP
      this.loading = true
      listFileblob(this.fileQueryParams).then((response) => {
        this.loading = false
        this.fileblobList = response.rows
        this.total = response.total
      })
      getFileblobToken(this.fileQueryParams).then((response) => {
        this.uuid = response.msg
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.bussId != null) {
            updateFunction(this.form).then((response) => {
              this.msgSuccess('修改成功')
              this.open = false
              store.dispatch('setStoreForm', this.form)
            })
          } else {
            addFunction(this.form).then((response) => {
              if (response && response.code === 200) {
                const promise = new Promise((resolve, reject) => {
                  this.form.ctId = response.data.ctId
                  store.dispatch('setStoreForm', this.form)
                  store.dispatch('setCtId', response.data)
                  // 调用由master传过来的refresh方法，以刷新spsMaster
                  const handleTypeModel = {
                    funNo: this.funNo,
                    handleType: 'edit',
                  }
                  store.dispatch('setHandleType', handleTypeModel)
                  resolve()
                })
                promise.then(() => {
                  this.masterRefresh()
                })
                this.msgSuccess(response.msg)
              } else {
                this.msgError(response.msg)
              }
            })
          }
          // 刷新列表标识修改
          store.dispatch('setChangeListTrue', this.funNo)
        }
      })
    },
    /** 根据不同字段，创建不同的树构建方法 */
    updateSelectTreeValctFunP(value) {
      this.form.ctFunP = value
    },
    getRecord() {
      if (this.singleStore.handleType != 'add' && this.bussId) {
        getFunction(this.bussId).then((response) => {
          this.form = response.data
          this.form.subFunNo = this.subFunNo
          this.form.funNo = this.funNo
          this.form.updateCreateInfo = true
          store.dispatch('setStoreForm', this.form)
        })
      } else if (this.singleStore.handleType == 'add') {
        // 新增
        this.$nextTick(() => {
          this.formInit()
          store.dispatch('setStoreForm', this.form)
        })
      }
    },
    // 表单数据信息初始化
    formInit() {
      this.form = {}
      this.form.ctFunType = '1'
      this.form.ctFunP = null
      this.form.funNo = this.funNo
      this.form.subFunNo = this.funNo
    },
  },
}
</script>
<style>
.main-form .vue-treeselect__control {
  width: 100%;
}
</style>
